<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <!-- 标题部分保持不变 -->
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="decorationColors" />
            <div class="title">
              <span class="title-text">汾阳专科护理操作耳鼻喉</span>
              <dv-decoration-6
                class="dv-dec-6"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
              />
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="decorationColors"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <!-- 第二行保持不变 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <div class="react-left ml-4 react-l-s">
              <span class="react-before"></span>
              <span class="text" @click="goToHomePage">返回首页</span>
              <span class="text" @click="goToPuJiangWardPage">浦江</span>
            </div>
            <div class="react-left ml-3" style="width:260px;">
              <span class="text">{{ subtitle[1] }}</span>
            </div>
          </div>
          <div class="d-flex aside-width">
            <div class="react-right mr-3" style="background-color: #0f1325;width:250px;"> 
              <span class="text fw-b">{{ subtitle[2]}}</span>
            </div>
            <div class="react-right mr-4 react-l-s">
              <span class="react-after"></span>
              <span class="text">
                {{ timeInfo.dateYear }} {{ timeInfo.dateWeek }}
                {{ timeInfo.dateDay }}
              </span>
            </div>
          </div>
        </div>
        
          <div class="body-box">
            <div class="WardBox">
              <WardView  
                v-for="(dept, index) in departments"
                :key="index"
                :title="dept.deptName"
                :statistics-data="getDeptData(dept.deptName)"
              />
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted, onUnmounted } from "vue";
import { formatTime } from "@/utils/index";
import { WEEK } from "@/constant/index";
import useDraw from "@/utils/useDraw";
import { title, subtitle, moduleInfo } from "@/constant/index";
import WardView from "./WardView.vue";
import axios from 'axios'; // 引入axios

export default defineComponent({
  components: {
    WardView
  },
  setup() {
    const decorationColors = ["#568aea", "#000000"];
    const loading = ref<boolean>(true);
    const timeInfo = reactive({
      setInterval: 0,
      dateDay: "",
      dateYear: "",
      dateWeek: "",
    });
    const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw();
    
    // 存储接口返回的完整数据
    const fullStatistics = ref<any[]>([]);
    // 存储科室列表
    const departments = ref<any[]>([]);

    onMounted(() => {
      fetchStatisticsData(); // 获取接口数据
      cancelLoading();
      handleTime();
      windowDraw();
      calcRate();
    });

    onUnmounted(() => {
      unWindowDraw();
      clearInterval(timeInfo.setInterval);
    });

    // 获取统计数据
    const fetchStatisticsData = async () => {
      try {
        const response = await axios.get(
          window.globalConfig.baseApi +'/api/Nurse/GetAllStatisticsDataByDeptJson?IDataType=5&dbKey=dbFY'
        );
      

        // 存储接口返回的数据
        fullStatistics.value = (response.data.fullStatistics || []).filter(
          (dept) =>
            dept &&
            typeof dept.deptName === "string" &&
            dept.deptName.trim() !== ""
        );
        departments.value = (response.data.departmentsOnly || []).filter(
          (item) =>
            item &&
            typeof item.deptName === "string" &&
            item.deptName.trim() !== ""
        );
      } catch (error) {
        console.error('获取统计数据失败:', error);
      }
    };

    // 根据科室名称获取对应的数据
    const getDeptData = (deptName: string) => {
      // 筛选出该科室的所有数据并转换为图表需要的格式
      return fullStatistics.value
        .filter(item => item.deptName === deptName)
        .map(item => ({
          name: item.iiiDataType,
          value: Number(item.number),
          lastWeekNum: Number(item.lastWeekNum) // 保留上周数据，可用于后续扩展
        }));
    };

    const cancelLoading = () => {
      setTimeout(() => {
        loading.value = false;
      }, 500);
    };

    const handleTime = () => {
      timeInfo.setInterval = setInterval(() => {
        const date = new Date();
        timeInfo.dateDay = formatTime(date, "HH: mm: ss");
        timeInfo.dateYear = formatTime(date, "yyyy-MM-dd");
        timeInfo.dateWeek = WEEK[date.getDay()];
      }, 1000);
    };

    return {
      loading,
      timeInfo,
      appRef,
      title,
      subtitle,
      moduleInfo,
      departments,
      getDeptData
    };
  },
  methods: {
    goToHomePage() {
      this.$router.push({ name: "Index" });
    },
    goToPuJiangWardPage() {
      this.$router.push({ name: "PuJiangZKHLEBH" });
    },
  },
});
</script>

<style lang="scss" scoped>
@import "../FenYangZKHLEBHView/ZKHLK.scss";

.WardBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  // 减小行与行之间的间距
  row-gap: 5px; /* 控制上下行之间的间距 */
  margin-bottom: 30px; /* 底部留白 */
  align-content: flex-start; /* 确保内容顶部对齐，减少额外空间 */
}

// 调整每个WardView项的外边距
.WardBox > * {
  margin: 2px 10px; /* 进一步减小上下边距 */
}
</style>